<template>
  <div class="showEchart">
    <line-echart v-bind="hoursWeather"></line-echart>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
import LineEchart from './echarts/src/line-echart.vue'

const store = useStore()

const hoursWeather = computed(() => {
  const title = '24小时预报'
  const xLabels = []
  const values = []
  const hoursWeather = store.state.hourly
  for (const item of hoursWeather) {
    xLabels.push(item.fxTime.substr(11, 5))
    values.push(item.temp)
  }
  return { title, xLabels, values }
})
</script>

<style lang="less" scoped>
.showEchart {
  margin-top: 10px;
}
</style>
